<template>
    <el-container>
        <el-main>
            <el-form label-suffix="：" label-width="150px" label-position="right">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="开始">
                            <el-input v-model="form.start" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束">
                            <el-input v-model="form.end" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" el-col style="text-align: center;">
                        <el-button type="warning" size="small" icon="el-icon-search" @click="getList">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-col :span="24">
                    <el-button @click="openOperateDialog('add')">添加</el-button>
                    <el-button @click="openOperateDialog('remove')">删除</el-button>
                    <el-button @click="openOperateDialog('intersection')">交集</el-button>
                    <el-button @click="openOperateDialog('union')">并集</el-button>
                    <el-button @click="openOperateDialog('difference')">差集</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
                <el-col :span="24">
                    <el-table :data="list"
                              border
                              fit
                              highlight-current-row
                              style="width: 100%;">
                        <el-table-column label="SortSet的值">
                            <template slot-scope="scope">
                                {{scope.row}}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
                <el-col :span="24">
                    共有{{count}}个记录
                </el-col>
            </el-row>
        </el-main>
        <el-dialog :visible.sync="operateDialog.show">
            <el-form @submit.native.prevent>
                <el-form-item>
                    <TagInput place-holder="请输入值" :value="operateDialog.datas"
                    ></TagInput>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="doOperate">确定</el-button>
                    <el-button @click="closeOperateDialog">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>
</template>

<script>
    import TagInput from '@/components/TagInput'

    export default {
        name: 'app',
        components: {
            TagInput
        },
        data() {
            return {
                list: [],
                count: 0,
                operateDialog: {
                    show: false,
                    datas: [],
                    oper: ""
                },
                form: {
                    start: null,
                    end: null
                }
            }
        },
        mounted() {
            this.getList()
        },
        methods: {

            getList() {
                this.$axios
                    .post("/api/data", this.form, {})
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.list = res.data.data.list
                            this.count = res.data.data.count
                        } else {
                            this.$message.error(res.data.msg)
                        }
                        console.log(res);
                    });
            },
            add() {
                this.$axios
                    .post("/api/add", this.operateDialog.datas, {})
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success("操作成功")
                            this.getList()
                            this.closeOperateDialog()
                        } else {
                            this.$message.error(res.data.msg)
                        }
                        console.log(res);
                    });
            },
            remove() {
                this.$axios
                    .post("/api/remove", this.operateDialog.datas, {})
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success("操作成功")
                            this.getList()
                            this.closeOperateDialog()

                        } else {
                            this.$message.error(res.data.msg)
                        }
                        console.log(res);
                    });
            },
            intersection() {
                this.$axios
                    .post("/api/intersection", this.operateDialog.datas, {})
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$alert("结果:" + JSON.stringify(res.data.data))
                            this.closeOperateDialog()

                        } else {
                            this.$message.error(res.data.msg)
                        }
                        console.log(res);
                    });
            },
            union() {
                this.$axios
                    .post("/api/union", this.operateDialog.datas, {})
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$alert("结果:" + JSON.stringify(res.data.data))
                            this.closeOperateDialog()
                        } else {
                            this.$message.error(res.data.msg)
                        }
                        console.log(res);
                    });
            },
            difference() {
                this.$axios
                    .post("/api/difference", this.operateDialog.datas, {})
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$alert("结果:" + JSON.stringify(res.data.data))

                            this.closeOperateDialog()

                        } else {
                            this.$message.error(res.data.msg)
                        }
                        console.log(res);
                    });
            },
            doOperate() {
                if (this.operateDialog.oper === "add") {
                    this.add()
                }
                if (this.operateDialog.oper === "remove") {
                    this.remove()
                }
                if (this.operateDialog.oper === "intersection") {
                    this.intersection()
                }
                if (this.operateDialog.oper === "union") {
                    this.union()
                }
                if (this.operateDialog.oper === "difference") {
                    this.difference()
                }

            },
            closeOperateDialog() {
                this.operateDialog.show = false
                this.operateDialog.datas = []
            },
            openOperateDialog(oper) {
                this.operateDialog.datas = []
                this.operateDialog.oper = oper
                this.operateDialog.show = true
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
